<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <h2>Hello,{{message}}!</h2>
    <!-- 左边的变量和右边的变量相加 -->
    <h2>{{firstName + lastName}}</h2>
    <!-- Mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
    <h2>{{18+2}}</h2>
    <h2>{{firstName + ' ' + lastName}}</h2>
    <!-- 没有意义 -->
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{fullName}}</h2>
    <!-- 计算属性当成属性来使用，是不用加()的。我们要把fullName1当成一个属性来使用。 -->
    <h2>{{fullName1}}</h2>
    <h2>{{counter * 2}}</h2>
  </div>
  <script src="../practice_project/js/vue.js"></script>
  <script>
    const root = new Vue({
      el: '#root',
      data: {
        message: '计算属性具有缓存,methods是没有缓存的',
        firstName: '张',
        lastName: '三',
        counter: 100
      },
      computed: {
        // 这里定义的函数一般不加动词，尽可能使用属性的方式起名
        // 计算属性看起来是函数，本质是属性
        // 计算属性的简写------通常我们使用这种简写形式 
        fullName: function () { //这里只是实现了getter方法
          return this.firstName + ' ' + this.lastName;
        },

        // name:'计算属性的setter方法和getter方法'
        // 定义了一个属性fullName1,fullName1类型也是一个对象
        fullName1: {
          //一般情况下，不希望别人给set属性设置值，一般是没有set方法的
          set: function (newValue) { //可以把修改的内容传进来
            // set: function () {
            // 可以删除掉set方法
            console.log('-------', newValue)
            const names = newValue.split(' ')
            this.firstName = names[0];
            this.lastName = names[1];
          },
          get() { //计算属性一般来说只要实现get方法就行了，没有set方法就是只读属性
            return 'abc' + this.firstName + ' ' + this.lastName;
          }
        },

      },
      methods: {
        getFullName: function () {
          return this.firstName + ' ' + this.lastName;
        }
      }
    })
  </script>
</body>

</html>